﻿@using ECGadmin.Common
@using ECGadmin.WebUI.CustomHelpers
@using ECGadmin.WebUI.Models
@model BannerDto
@{
    ViewBag.Title = "EditBanner";
    Layout = "~/Views/Shared/_layout.cshtml";
}

<link href="~/Content/css/browerImage.css" rel="stylesheet" />
<link href="~/Scripts/jQueryDatePicker/css/ui-lightness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet" />
<link href="~/Scripts/jQueryDatePicker/js/jquery-ui-timepicker-addon.css" rel="stylesheet" />

@section LeftMenu
{
    <div id="left">
        <div class="LeftMenuWraper">
            <div class="leftMenuHeader">
                <span style="padding-left: 10px;">
                    <strong>Truy cập nhanh</strong>
                </span>
            </div>
            <ul id="p-quick-menu" class="quick-menu">
                <li class="qmn-info-pro">Thông tin Banner</li>
                <li class="qmn-seo-pro">Nhập ảnh</li>
            </ul>
            <div class="leftMenuFooter"></div>
        </div>
    </div>
    <!-- END #left -->
}

<nav>
    <div id="jCrumbs" class="breadCrumb module">
        <ul>
            <li><a href="@Url.Action("Index","Home")"><i class="bootstrap icon-home"></i></a></li>
            <li><a href="javascript:void(0)">Chỉnh sửa Banner</a> </li>
        </ul>
    </div>
</nav>

<div class="toolBox">
    @Html.ToolBox(new List<object> { new Edit { ClassCss = "Edit", ActionName = "Javascript:void(0)" } ,
    new Back{ ClassCss = "Back",ActionName = @Url.Action("Index","Banner") } })
</div>

@using (Html.BeginForm("EditBanner", "Banner", FormMethod.Post, new { id = "EditBannerForm" }))
{
    @Html.HiddenFor(m => m.BannerId)
    @Html.HiddenFor(m => m.CreateDate)
    @Html.HiddenFor(m => m.UpdateDate)

    <div class="box-Info">
        <div class="Info-header">
            <span>Chỉnh sửa thông tin Banner</span>
        </div>

        <div class="Info-body ib-infopro">
            <div>@Html.ValidationMessage("ErrorSummary")</div>
            <table cellpadding="0" cellspacing="0" width="100%" border="0" class="table-info">
                <tr>
                    <td class="tInfoLeft">Tên banner
                    </td>
                    <td class="tInfoRight">
                        @Html.TextBoxFor(m => m.Subject)
                        @Html.ValidationMessageFor(m => m.Subject)
                    </td>
                </tr>
                <tr>
                    <td class="tInfoLeft">Thuộc Trang
                    </td>
                    <td class="tInfoRight">
                        @Html.DropDownListFor(m => m.PageId, new SelectList((List<PageDto>)ViewBag.PageList, "PageId", "Name"))
                    </td>
                </tr>
                <tr>
                    <td class="tInfoLeft">Vị trí
                    </td>
                    <td class="tInfoRight">
                        @Html.DropDownListFor(m => m.PositionId, new SelectList((List<PositionDto>)ViewBag.PositionList, "PositionId", "Name"))
                    </td>
                </tr>
                <tr>
                    <td class="tInfoLeft">
                        Thuộc danh mục
                    </td>
                    <td class="tInfoRight">
                        @Html.DropDownListFor(m => m.CategoryId, new SelectList((List<ProductCategoryDto>)ViewBag.MenuList, "Id", "Name"))
                    </td>
                </tr>
                <tr>
                    <td class="tInfoLeft">Kích hoạt
                    </td>
                    <td class="tInfoRight">
                        @Html.CheckBoxFor(m => m.Active)
                    </td>
                </tr>
                <tr>
                    <td class="tInfoLeft">Ngày bắt đầu
                    </td>
                    <td class="tInfoRight">
                        @Html.TextBoxFor(m => m.StartDate)
                        @Html.ValidationMessageFor(m => m.StartDate)
                    </td>
                </tr>
                <tr>
                    <td class="tInfoLeft">Ngày kết thúc
                    </td>
                    <td class="tInfoRight">
                        @Html.TextBoxFor(m => m.ExpireDate)
                        @Html.ValidationMessageFor(m => m.ExpireDate)
                    </td>
                </tr>
            </table>
        </div>
    </div>
}

@Html.Action("UploadBannerImage", new { bannerId = Model.BannerId  })

@section scripts
{    
    @Scripts.Render("~/bundles/jqueryval")
    <script src="@Url.Content("~/Scripts/jQueryDatePicker/js/jquery-ui-1.10.1.custom.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jQueryDatePicker/js/jquery-ui-timepicker-addon.js")"></script>
    <script>
        // ----------- Submit Form -----------------------
        SubmitFormUseToolBox($('ul li.Edit a'), $('form'));

        // ------------- Date picker -------
        $('#StartDate').datetimepicker({ dateFormat: 'dd/mm/yy', timeFormat: "hh:mm:ss tt" });
        $('#ExpireDate').datetimepicker({ dateFormat: 'dd/mm/yy', timeFormat: "hh:mm:ss tt" });
        
        // --------------------- Upload Images Banner ---------------------
        function UploadImage() {
            $("#ImgForm").submit();
        }

        function UploadImage_Complete() {

            //Grab the content of the textarea we named jsonResult .  This shold be loaded into 
            //the hidden iFrame.
            var dataInfo = $.parseJSON($("#UploadTarget").contents().find("#jsonResult")[0].innerHTML);

            //If there was an error, display it to the user
            if (dataInfo.IsValid == false) {
                alert(dataInfo.Message);
                return;
            }

            $.ajax({
                url: '/Banner/AjaxBannerImageItem',
                data: { bannerImageId: dataInfo.BannerImageId },
                success: function(htmlFragment) {
                    $('.p-img-info .banner-image-title').after(htmlFragment);
                    $('.p-img-info tr').eq(1).fadeIn(500);
                },
                error: function() {
                    alert('Đã có lỗi xảy ra!');
                }
            });
        }
        
        function EditImage() {
            $("#EditImgForm").submit();
        }

        function EditBannerImage_Complete() {

            //Grab the content of the textarea we named jsonResult.  This shold be loaded into 
            //the hidden iFrame.
            var dataInfo = $.parseJSON($("#EditUploadTarget").contents().find("#jsonResult")[0].innerHTML);

            //If there was an error, display it to the user
            if (dataInfo.IsValid == false) {
                alert(dataInfo.Message);
                return;
            }

            $.ajax({
                url: '/Banner/AjaxBannerImageItem',
                data: { bannerImageId: dataInfo.BannerImageId },
                success: function (htmlFragment) {
                    $('.p-img-info tr#bni-' + dataInfo.BannerImageId).remove();
                    $('.p-img-info .banner-image-title').after(htmlFragment);
                    $('.p-img-info tr').eq(1).fadeIn(500);
                },
                error: function () {
                    alert('Đã có lỗi xảy ra!');
                }
            });
        }

        function AjaxResultDeleteBannerImage(result) {
            if (result.IsValid == false) {
                alert(result.Message);
                return;
            }
            $('tr#bni-' + result.BannerImageId).remove();
            alert('Xóa ảnh thành công!');
        }
        
        function AjaxResultEditBannerImage(htmlFragment) {
            $('.create-banner-image').hide();
            $('.banner-wrapper').html(htmlFragment);
        }
        
        function RemoveEditBannerImage() {
            $('#edit-banner-image').remove();
            $('.create-banner-image').show();
        }
    </script>
}
